<template>
    <div class="handle">
        <!-- tab  待处理 已定责-->
        <div class="handle-tab">
            <ul>
                <li v-for="(item, index) in handleTab" :key="index" @click="toggleTab(index)" :class="{active: handleNum == index}">{{item}}
                    <p :class="{line: handleNum == index}"></p>
                </li>
            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="handle-content">
            <div class="handle-page1" v-show="handleNum == 0">
                <toast :msg="msg" ref="toast"></toast>
                <ul>
                    <li v-for="(item,index) in page1List" :key="index">
                        <p><img src="../../assets/img/time-bg.png" alt=""><span>{{item.time}}</span></p>
                        <p><img src="../../assets/img/address-bg.png" alt=""><span class="span-width">{{item.address}}</span></p>
                        <p class="case-no" @click="handleUnProcesseJump(item.accidentNo)"><span class="page-gray">案件编号: &nbsp;{{item.caseNumber}}</span><img class="img-width" src="../../assets/img/arrows.png" alt=""></p>
                        <p @click="handleDelete(item,index)"><img class="delete" src="../../assets/img/delete-bg.png" alt=""></p>
                    </li>
                </ul>
            </div>
            <div class="handle-page1" v-show="handleNum == 1">
                <toast :msg="msg" ref="toast2"></toast>
                 <ul>
                    <li v-for="(item,index) in page2List" :key="index" @click="handleProcessedJump(item.accidentNo)">
                        <p><img src="../../assets/img/time-bg.png" alt=""><span>{{item.time}}</span></p>
                        <p><img src="../../assets/img/address-bg.png" alt=""><span class="span-width">{{item.address}}</span></p>
                        <p class="case-no"><span class="page-gray">案件编号: &nbsp;{{item.caseNumber}}</span><img class="img-width" src="../../assets/img/arrows.png" alt=""></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {http} from 'utils/request.js';
import {toJumpPage} from 'utils/commonUtil.js';
import api from '../../api/index.js';
import Toast from '../../common/toast/toast';
export default {
    name:"handle",
    components:{
        Toast
    },
    data() {
        return {
            handleTab: ['待处理', '已定责'],
            handleNum: 0,
            requestFlag:true,
            params:{
                mobile:''
            },
            page1List: [
            ],
            page2List: [
            ],
            msg:'找不到报案记录'
        }
    },
    methods: {
        toggleTab (index) {
            this.handleNum = index;
            if(index == 0) {
                this.page1List = [];
                this.getAccidentInfo('N');
            } else if(index == 1){
                this.page2List = [];
                this.getAccidentInfo('6');
            }
            console.log(index);
        },
        //已定责跳转
        handleProcessedJump(no){
            // todo
            const fromPage = this.$route.params.fromPage;
            this.$router.push({
                name:'information',
                query:{
                    accidentNo:no,
                    fromPage:fromPage,
                    mobile: this.params.mobile
                }
            });
        },
        //待处理跳转
        handleUnProcesseJump(no){
            //todo
            const fromPage = this.$route.query.fromPage;
            const mobile =  this.$route.query.mobile;
            let params = {
                accidentNo:no,
                mobile:mobile
            };
            http.post(api.API_UNPROCESSE_ACCIDENT_SWITCH,params).then((response)=>{
                if(response.code == 1){
                    //获取跳转的路由和参数
                    const routeObj = toJumpPage(response.resultObj,params);
                    if(routeObj) {
                        this.$router.push(routeObj);
                    }
                }else{

                }
            }).catch((err)=>{
                console.log(err);
            });
        },
        getAccidentInfo(status){
            let self = this;
            this.params.mobile = this.$route.query.mobile;
            this.params.accidentStatus = status;
            this.requestFlag = false;
            http.get(api.API_QUERY_ACCIDENT_INFO,this.params).then((response)=>{
                this.requestFlag = true;
                if(response.code == '1'){
                    if(response.resultObj.list.length > 0){
                        let arr = [];
                        //todo
                        response.resultObj.list.forEach((item,index)=>{
                        let obj = {};
                        obj.time = item.accidentInfoBean.accidentCreateDateStr; //事故创建时间
                        obj.address = item.accidentInfoBean.accidentProvince + 
                                     item.accidentInfoBean.accidentCity + 
                                     item.accidentInfoBean.accidentArea +
                                     item.accidentInfoBean.accidentWhere;
                        obj.caseNumber = item.accidentInfoBean.accidentNoStr;
                        obj.accidentNo = item.accidentInfoBean.accidentNoStr;  //案件编号
                        arr.push(obj);
                        });
                        if(status == 'N'){
                            this.page1List = arr;
                            this.$nextTick(()=>{
                                this.$refs.toast.close();
                            });
                        }else{
                            this.page2List = arr;
                            this.$nextTick(()=>{
                                this.$refs.toast2.close();
                            });
                        }
                    }else if(response.resultObj.list.length==0){
                        if(status == 'N'){
                            this.$refs.toast.open();
                        }else{
                            this.$refs.toast2.open();
                        }
                    }
                }else{
                    this.$toast.message({
                        message: response.message,
                        color: "#F57979"
                    });
                }
            }).catch((error)=>{
                console.log(error);
            })
        },
        handleDelete(data,index){
            this.$confirm('确定要删除？', '提示', {}).then(({ result }) => {
                if (result) {
                    let params = {
                        accidentNo:data.accidentNo
                    };
                    http.get(api.API_DELETE_REPORT_RECORD,params).then((response) => {
                        if(response.code == '1'){
                            this.page1List.splice(index,1);
                            if(this.page1List.length==0) this.$refs.toast.open();
                        }else{
                            this.$toast.message({
                                message: response.message,
                                color: "#F57979"
                            });
                        }
                    }).catch((err) => {
                        console.log(err);
                    }); 
                }
            });
        }
    },
    created() {
        document.title = '报案记录';
    },
    mounted() {
        this.getAccidentInfo('N')  //待处理
    }
}
</script>

<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
.handle {
    // height: 100%;
    background-color: #F5F6F8;
    .handle-tab {
        position: fixed;
        width: 100%;
        height: rem(44);
        background-color: #fff;
        z-index: 10;
        ul {
            width: 48%;
            margin: 0 auto; 
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            li {
                position: relative;
                font-size: rem(15);
                color: #85898D;
                &.active {
                   color: #5898F8;
                }
                .line {
                    position: absolute;
                    bottom: rem(-14);
                    left: rem(10);
                    width: rem(25);
                    height: rem(2);
                    background-color: #5898F8;
                }
            }
        }
    }
    .handle-content {
        position: absolute;
        top: rem(60);
        left: 0;
        right: 0;
        .handle-page1 {
            width: 90%;
            margin: 0 auto;
            li {
                position: relative;
                background-color: #fff;
                padding: rem(10) rem(10) 0 rem(10);
                box-sizing:  border-box;
                border-radius: rem(3);
                margin-bottom: rem(15);
                .duty-detail {
                    display: flex;
                    font-family: PingFangSC-Regular;
                    font-size: 13px;
                    color: #555555;
                    letter-spacing: 0;
                    margin-bottom: rem(12);
                    .divider-line {
                        width: rem(1);
                        height: rem(13);
                        background-color: #D8D8D8;
                        margin:0 rem(23);
                        // margin-bottom: rem(12);
                    }
                }
                img {
                    display: inline-block;
                    width: rem(13);
                    height: rem(13);
                    margin-right: rem(8);
                }
                span {
                    display: inline-block;
                    width: 80%;
                    font-size: rem(13);
                    color: #555555;
                }
                p:nth-child(2) {
                    margin: rem(8) 0;
                }
                p {
                    display: flex;
                }
                p.case-no {
                    height: rem(35);
                    justify-content: space-between;
                    align-items: center;
                    border-top: rem(1) solid #F1F2F4;
                }
                .page-gray {
                    color: #C9CCD0;
                }
                .delete {
                    position: absolute;
                    top: rem(10);
                    right: 0;
                    width: rem(14);
                    height: rem(15);
                }
            }
        }
    }
}
</style>
